<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id='app'>
    <async-box></async-box>
  </div>
</body>
<script>
  const app = Vue.createApp({
    data () {
      return {}
    },
  })
  // app.component('async-box', Vue.defineAsyncComponent(() => import('')))
  // defineAsyncComponent 用来定义一个异步组件用的方法
  app.component('async-box', Vue.defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      // 发送数据请求，从服务器中获取到组件模板
      setTimeout(() => {
        const res = '<div> 从服务器获取到的组件模板和对应的数据 </div>'
        // 将数据请求得到的组件返回到组件中
        if (res) {
          resolve({
            template: res,
          })
        } else {
          // reject 在加载失败的时候在控制台给出错误信息
          reject('<div>404</div>')
        }
      }, 1000)

    })
  }))

  app.mount('#app')
</script>

</html>
